<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型</title>
		<style>
			div{
				/* div有宽没高：设置宽高 */
				width:100px;
				height:100px;
				border:1px solid red;
				/* 盒/框模型 ：页面任何元素存在于盒模型中
				       组成 ：外边距+边框+内边距+内容
					外边距 ： margin属性 与 border属性方向用法一致
					语法 ： 属性值1个，代表4个方向，顺时针：上 右 下 左
					       属性值2个，代表4个方向，顺时针：上下 右左
						                    自适应居中：0  auto
						   属性值3个，代表4个方向，顺时针：上 右左 下
						   属性值4个，代表4个方向，顺时针：上 右 下 左
					外边距-方向属性：
					margin-left:数值px;
					margin-right:数值px;
					margin-top:数值px;
					margin-bottom:数值px;
						*/
					   margin:100px;/* 上 右 下 左 */
					   margin:10px 100px;/* 上下 右左 */
					   margin:10px 20px 100px;/* 上 右左 下 */
					   margin:10px 20px 30px 100px;/* 上 右 下 左 */
					   /* 自适应居中 */
					   margin:0 auto;
					   /* 元素向下移动50个像素 */
					   margin-top:50px;
					   /* 内边距：padding属性与margin属性使用方法类似
					       特点：边框与内容之间距离，撑开适应于精灵图
						   语法 ： 属性值1个，代表4个方向，顺时针：上 右 下 左
						          属性值2个，代表4个方向，顺时针：上下 右左
						   	   属性值3个，代表4个方向，顺时针：上 右左 下
						   	   属性值4个，代表4个方向，顺时针：上 右 下 左
						    内边距-方向与外边距-方向使用方法一致
					   */
					  padding:50px;
					  padding:50px 100px;/* 使用率：精灵图 */
					  padding:50px 100px 200px;
					  padding:50pc 100px 200px 300px;
			}
		</style>
	</head>
	<body>
		<div></div>
		
	</body>
</html>